
import pathVnode from "./pathVnode";
// import createElement from "./createElement";
// 判断是否是同一个虚拟节点
function checkSameVnoe(a, b) {
  return a.sel === b.sel && a.key === b.key;
}

/**
 * parentElm 父节点
 * oldCh  旧的子元素
 * newCh  新的子元素
 * **/
export default function updateChildern(parentElm, oldCh, newCh) {
  console.log("使用updateChildern进行精细化对比   diff!");
  console.log(oldCh, "旧", newCh, "新");

  // 旧前
  let oldStartIdx = 0;
  // 新前
  let newStartIdx = 0;
  // 旧后
  let oldEndIdx = oldCh.length - 1;
  // 新后
  let newEndIdx = newCh.length - 1;
  // 旧前节点
  let oldStartVnode = oldCh[0];
  // 新前节点
  let newStartVnode = newCh[0];
  // 旧后节点
  let oldEndVnode = oldCh[oldEndIdx];
  // 新后节点
  let newEndVnode = newCh[newEndIdx];

  // 开始使用 while进行循环
  // 当 旧前 小于等于 旧后  并且 新前 小于等于 新后
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    // 旧前节点是否等于新前及节点(新前和旧前)
    if (checkSameVnoe(newStartVnode, oldStartVnode)) {
      console.log("新前与旧前命中 1");
      pathVnode(newStartVnode, oldStartVnode);
      oldStartVnode = oldCh[++oldStartIdx];
      newStartVnode = newCh[++newStartIdx];
    } else if (checkSameVnoe(oldEndVnode, newEndVnode)) {
      console.log("新后与旧后命中 2");
      // 新后与旧后
      pathVnode(oldEndVnode, newEndVnode);
      oldEndVnode = oldCh[--oldEndIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (checkSameVnoe(newEndVnode, oldStartVnode)) {
      console.log("新后与旧前命中 3");
      pathVnode(oldStartVnode, newEndVnode);

      // 当③(新后与旧前)命中的时候,此时要移动节点。移动新前指向的这个节点到老节点的旧后的后面
      parentElm.insetBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);

      oldStartVnode = oldCh[++oldStartIdx];
      newEndVnode = newCh[--newEndIdx];
    } else if (checkSameVnoe(newStartVnode, oldEndVnode)) {
      console.log("新前与旧后命中 4");
      pathVnode(newStartVnode, oldEndVnode);
    }
  }
}
